<template>
  <div class="app-container home">
    <h1>我的委托</h1>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-check"
          size="mini"
          :disabled="single"
          @click="handleSuccessEntrust"
          v-hasPermi="['system:role:edit']"
        >已完成委托</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-close"
          size="mini"
          :disabled="multiple"
          @click="handleErrorEntrust"
          v-hasPermi="['system:role:remove']"
        >未完成委托</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="entrustAllData"
      border
      style="width: 100%">
      <el-table-column
        prop="symbol"
        label="股票编码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="sname"
        label="股票名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="commissionPrice"
        label="委托价格"
        width="180">
      </el-table-column>
      <el-table-column
        prop="trade"
        label="当前价格"
        width="180">
      </el-table-column>
      <el-table-column
        prop="num"
        label="手数"
        width="180">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
        width="180">
        <template v-slot="scope">
          {{scope.row.state==1?'买入':'卖出'}}
        </template>
      </el-table-column>
    </el-table>

<!--已完成委托的嵌套表单-->
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="successEntrust">
        <el-table-column property="symbol" label="股票编码" width="180"></el-table-column>
        <el-table-column property="sname" label="股票名称" width="180"></el-table-column>
        <el-table-column property="commissionPrice" label="委托价格" width="180"></el-table-column>
        <el-table-column property="trade" label="当前价格" width="180"></el-table-column>
        <el-table-column property="num" label="手数" width="180"></el-table-column>
        <el-table-column property="state" label="状态" width="180">
          <template v-slot="scope">
            {{scope.row.state==1?'买入':'卖出'}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--未完成委托的嵌套表单-->
    <el-dialog title="收货地址" :visible.sync="dialogErrorTableVisible">
      <el-table :data="errorEntrust">
        <el-table-column property="symbol" label="股票编码" width="180"></el-table-column>
        <el-table-column property="sname" label="股票名称" width="180"></el-table-column>
        <el-table-column property="commissionPrice" label="委托价格" width="180"></el-table-column>
        <el-table-column property="trade" label="当前价格" width="180"></el-table-column>
        <el-table-column property="num" label="手数" width="180"></el-table-column>
        <el-table-column property="state" label="状态" width="180">
          <template v-slot="scope">
            {{scope.row.state==1?'买入':'卖出'}}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>



  </div>
</template>

<script>
import {errorEntrustList, getEntrustAllList, successEntrustList} from "@/api/stock/stock";

export default {
  name: "commission",
  data(){
    return{
      entrustAllData:[],
      dialogTableVisible:false,
      successEntrust:[],
      errorEntrust:[],
      dialogErrorTableVisible:false
    }
  },methods:{
    /*展示所有的委托订单*/
    entrustAllList(){
      getEntrustAllList().then(res=>{
        this.entrustAllData=res.data
      })
    },
    /*已完成的委托订单*/
    handleSuccessEntrust(){
      this.dialogTableVisible=true;
      successEntrustList().then(res=>{
        this.successEntrust=res.data;
      })
    },
    /*未完成的委托订单*/
    handleErrorEntrust(){
      this.dialogErrorTableVisible=true;
      errorEntrustList().then(res=>{
        this.errorEntrust=res.data;
      })
    }

  },created() {
    this.entrustAllList()
  }
}
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
